<template>
  <div>
    <el-upload
      ref="upload"
      class="upload"
      action="/api/oss/uploadPDFFile"
      list-type="picture-card"
      :headers="token"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
         :on-success="handleSuccess"
    >
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="90vw" append-to-body>
      <iframe :src="url" style="border: none; width: 100%; height: 100vh">
        <p>您的浏览器不支持 iframe 标签,请从列表中下载预览</p>
      </iframe>
    </el-dialog>
  </div>
</template>
<script>
import { delpictureApi } from '@/api/mission'
export default {
  props: {
    reportList: {
      type: Array
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      url: '',
      pdfList: [],
      pdfData: []
    }
  },
  computed: {
    token () {
      return { token: this.$store.getters.userInfo.token }
    }
  },

  methods: {
    // 删除
    async handleRemove (file, fileList) {
      console.log(fileList, 'del')
      if (file.status === 'success') {
        this.pdfList.filter((item, index) => {
          if (item === file.response.data) {
            this.pdfList.splice(index, 1)
          }
          return item !== file.response.data
        })
        console.log(this.pdfList)
        await delpictureApi(file.response.data)
      }
    },
    // 新页面展示
    handleDownload (file) {
      console.log(file)
    },
    handleSuccess (fileList, file) {
      this.pdfData.push(file.response.data)
      console.log(this.pdfData)
      this.$emit('getPicture', this.pdfData) // 触发自定义事件，传递数据给父组件
    },
    handlePreview (file) {
      console.log(file)
      window.open(file.url, '_blank')
    },
    beforeUpload (file) {
      console.log(file)
    }
  }
}
</script>
<style lang="scss" scoped>
// 上传图片
.upload {
  max-height: 1.5rem;
  i {
    font-size: 0.35rem;
    //text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.175rem;
    margin-left: -0.175rem;
  }
}
::v-deep .el-upload--picture-card {
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  position: relative;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
}
</style>
